<template>
	<view class="big-content">
		<view class="content-box">
			<view class="first-box">
				<view class="button">
					免费课程
				</view>
				<view class="class-title">
					{{topData.courseTitle}}
				</view>
				<view class="small-class-title">
					<text>{{topData.courseLevelLabel}}</text>
					<text>2小时40分钟</text>
					<text>15人学</text>
				</view>
			</view>
			<view class="second-box">
				<view class="introduction">
					简介
				</view>
				<view class="introduction-content">
					<rich-text :nodes="topData.courseDetail"></rich-text>
				</view>
			</view>
			<view class="third-box">
				<view class="third-title">
					章节
				</view>
				<view class="third-content">
					<view class="list" v-for="(item,index) in titleData" :key="item.sectionId">
						<view class="big-title">
							{{item.sectionName}}
						</view>
						<view class="small-title" v-for="(v,i) in item.subSections" :key="v.sectionId">
							<view class="left-title-content" @click="study(v.sectionId)">
								<image src="../../static/images/live.png" mode="widthFix"></image>
								<view class="list-time">200-1</view>
								<view class="small-contnet">{{v.sectionName}}</view>
							</view>
							<text>(28分钟)</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="box1" @click="collect" v-text="isCollect==false?'收藏':'已收藏'">
				收藏
			</view>
			<view class="box2">
				分享
			</view>
			<view class="box3" @click="goLearn">
				立即学习
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGet
	} from "../../api/index.js"
	export default {
		data() {
			return {
				isCollect: false, //是否收藏
				topData: "", //存放头部标题等信息
				titleData: "",
				classId: "",
				firstClassId: "" //存放点击立即学习渲染的视频id
			};
		},
		methods: {
			study(data) {
				getGet("/pcUser/login-user/info").then(res => {
					if (res.data.code == 0) {
						console.log(data)
						uni.navigateTo({
							url: `../studyDetail/studyDetail?classid=${this.classId}&videoid=${data}`
						})
					} else {
						uni.redirectTo({
							url: "../login/login"
						})
					}
				})
			},
			goLearn() {
				getGet("/pcUser/login-user/info").then(res => {
					console.log(res)
					if (res.data.code == 0) {
						let arr = []
						this.titleData.forEach(item => {
							item.subSections.forEach((v, i) => {
								arr.push(v.sectionId)
								// console.log(arr[0])
								this.firstClassId = arr[0]
							})
						})
						uni.navigateTo({
							url: `../studyDetail/studyDetail?classid=${this.classId}&videoid=${this.firstClassId}`
						})
					} else {
						uni.redirectTo({
							url: "../login/login"
						})
					}
				})
			},
			collect() {
				getGet("/pcUser/login-user/info").then(res => {
					if (res.data.code == 0) {
						if (this.isCollect == true) {
							uni.showModal({
								title: "确定要取消收藏吗",
								success: (res) => {
									if (res.confirm == true) {
										getGet(`/weChat/applet/course/collect/course/${this.classId}`)
											.then(res => {
												if (res.data.code == 0) {
													getGet(`/pc/course/detail/${this.classId}`).then(res => {
														this.isCollect = res.data.isCollect
														// console.log(res)
														this.topData = res.data.data
														this.titleData = res.data.data.sections
													})
												}
										})
									}
								}
							})
						} else {
							getGet(`/weChat/applet/course/collect/course/${this.classId}`).then(res => {
								if (res.data.code == 0) {
									// console.log(res)
									uni.showToast({
										title:"收藏成功"
									})
									getGet(`/pc/course/detail/${this.classId}`).then(res => {
										this.isCollect = res.data.isCollect
										// console.log(res)
										this.topData = res.data.data
										this.titleData = res.data.data.sections
									})
								}
							})
						}
					} else {
						uni.redirectTo({
							url: "../login/login"
						})
					}
				})
			}
		},
		onLoad(e) {
			// console.log(e.id)
			this.classId = e.id
			getGet(`/pc/course/detail/${e.id}`).then(res => {
				this.isCollect = res.data.isCollect
				// console.log(res)
				this.topData = res.data.data
				this.titleData = res.data.data.sections
			})
		}
	}
</script>

<style lang="less">
	// 底部
	.bottom {
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
	}

	.box1,
	.box2 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		color: black;
		font-size: 30rpx;
		font-weight: bolder;
		background-color: white;
	}

	.box3 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		color: white;
		font-size: 30rpx;
		background-color: #f59905;
	}

	.button {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ff2543;
		width: 200rpx;
		height: 70rpx;
		color: white;
		font-size: 30rpx;
		border-radius: 35rpx;
	}

	.content-box {
		background-color: #f5f5f5;
	}

	.class-title {
		font-size: 35rpx;
		font-weight: bold;
		margin: 10rpx 0;
	}

	.small-class-title {
		font-size: 17rpx;
	}

	.first-box,
	.second-box,
	.third-box {
		padding: 20rpx;
		background-color: white;
	}

	.first-box {
		padding-bottom: 30rpx;
		margin-bottom: 10rpx;
	}

	.introduction {
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.introduction-content {
		line-height: 40rpx;
	}

	.second-box {
		margin-bottom: 20rpx;
	}

	.third-title {
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.big-title {
		font-size: 35rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.small-title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx 20rpx;

		image {
			width: 25rpx;
		}
	}

	.list-time {
		width: 100rpx;
		margin: 0 15rpx;
	}

	.small-contnet {
		margin: 15rpx 0;
		display: block;
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.left-title-content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>
